<template>
	<view class="coupon">
		<view class="coupon_card">
			<view class="coupon_left">
				<text class="coupon_tag">签单就送</text>
				<view class="coupon_title">豪华装修大礼包</view>
				<view class="coupon_type">
					<text>限时优惠券</text>
					<text class="text_sub_com ml10">(2019.06.01~2019.09.30)</text>
				</view>
			</view>
			<view class="coupon_right">
				<view class="text_sub_com lh1">88人已领取</view>
				<view class="receive_btn">立即领取</view>
			</view>
		</view>

		<!-- 弹窗块 -->
		<!-- <van-popup position="bottom" class="modules coupon_mask"
			ref="vPopup">
			<navigator class="closemask">
				<image :src="`${constant.imgUrl}design/addfriclose.png`"></image>
			</navigator>
			<view class="mask_title">限时专享优惠</view>
			<view class="mask_body">
				<view class="mask_wrap">
					<view class="coupon_top">
						<text class="coupon_tag">签单就送</text>
						<view class="coupon_title">豪华装修大礼包</view>
						<view class="coupon_type">
							<text>限时优惠券</text>
							<text class="text_sub_com">(2019.06.01~2019.09.30)</text>
						</view>
					</view>
					<view class="coupon_bottom">
						<text class="text_sub_com">详细说明：第一次到店签约成功送智能开关、电动窗帘、智能空调开关、自动升降衣架一套</text>
					</view>
				</view>
				<view class="mask_input">
					<input type="text" v-model="mobile"
						placeholder="请输入手机号领取限时专享优惠券">
				</view>
				<view class="send_coupon_btn">发送优惠券到手机</view>
			</view>
		</van-popup> -->
	</view>
</template>

<script>
export default {
	name: 'coupon',
	data() {
		return {
			mobile: '',
			constant: this.$constant
		}
	}
}
</script>

<style lang="scss" scoped>
.lh1{
  line-height: 1;
}
.ml10{
  margin-left: 10px;
}
.text_sub_com {
  text-align: center;
}
.coupon {
  .modules {
    // height: 730px;
    // overflow: hidden;
    border-radius: 26px 26px 0 0;
  }
  //   弹窗
  .coupon_mask {
    .mask_body {
      padding: 0 40px;
    }
    .mask_title {
      height: 100px;
      line-height: 100px;
      font-size: 36px;
      text-align: center;
    }
    .mask_wrap {
      background-size: 100% 100%;
      background-image: url("https://wximg.meijiabang.com/hkds/miniapp/images/common/coupon_bg_2.png");
      //   box-shadow: 0 2px 10px #ffeff0;
      //   padding: 36px 0 22px 0;
      padding: 1px;
      margin-bottom: 30px;
      .coupon_top {
        padding: 30px 0 50px 0;
        margin-left: 200px;
        & > view {
          margin: 6px;
        }
      }
      .coupon_bottom {
        padding: 10px 30px 40px;
      }
    }
    .mask_input {
      input {
        width: calc(100% - 30px);
        height: 90px;
        border-radius: 50px;
        padding-left: 30px;
        outline: none;
        -webkit-appearance: none;
        background-color: #f5f5f5;
        border: 2px solid #ddd;
        font-size: 28px;
        color: #333;
      }
    }
    .send_coupon_btn {
      text-align: center;
      padding: 16px 0;
      color: #fff;
      font-size: 40px;
      border-radius: 50px;
      background: linear-gradient(#ff5b95, #ff3249);
      margin: 20px 0 30px;
    }
  }
  //   公共
  .coupon_top,
  .coupon_left {
    .coupon_tag {
      padding: 2px 8px;
      color: #fff;
      border-radius: 20px;
      background-color: #ff3249;
    }
    .coupon_title {
      font-size: 40px;
      font-weight: 600;
      color: #ff3249;
    }
  }
  //   页面
  .coupon_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px 30px 30px;
    margin: 30px 20px 10px;
    background-size: 100% 100%;
    background-image: url("https://wximg.meijiabang.com/hkds/miniapp/images/common/coupon_bg.png");
    .coupon_left {
      & > view {
        margin: 6px 0;
      }
    }
    .coupon_right {
      & > view {
        text-align: center;
        margin: 10px 0;
      }
      .receive_btn {
        margin-top: 16px;
        padding: 12px 30px;
        color: #fff;
        font-size: 30px;
        // font-weight: 600;
        border-radius: 40px;
        background: linear-gradient(#ff5b95, #ff3249);
      }
    }
  }
}
</style>

<style scoped>
.closemask {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 39px;
    top: 39px;
}

.closemask image {
    width: 30px;
    height: 30px;
}
</style>
